<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>职位查询</title>
    <link rel="stylesheet" href="css/iview.css">
    <style type="text/css">
	[v-cloak] {
			  display: none;
			}
	</style>
</head>
<body>
    <div class="container" style="margin-top: 1%;text-align:center;font-size: 20px;">
              拉勾职位查询
    </div>
    <div id="app" v-cloak>
        <div style="margin-bottom: 8px;margin-top: 8px;margin-left: 20px;margin-right: 20px">
            <i-input placeholder="职位名称" style="width: 300px" v-model="positionName"></i-input>
            <i-button type="primary" icon="ios-search" @click="queryPosition(positionName)">搜索</i-button>
        </div>
        <div style="margin-bottom: 8px;margin-top: 8px;margin-left: 20px;margin-right: 20px">
            <template>
                <i-table :content="self" :columns="tableTitle" :data="list"></i-table>
                <br>
            </template>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/iview.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script>
    /**
     * 用户js
     */
    let tableTitle = [
        {
            key : "positionName",
            title : "职位名称"
        },
        {
            key : "companyName",
            title : "公司名称"
        },
        {
            key : "positionAdvantage",
            title : "职位特色"
        },
        {
            key : "salary",
            title : "工资"
        }
    ];
    let app = new Vue({
        el: '#app',
        data:{
            list : [],
            positionName : ""
        },
        mounted() {
            this.initFormatter();
            this.queryPosition();
        },
        methods: {
            /**
             * 获取职位列表
             */
            queryPosition: function (positionName) {
                let then = this;
                axios.get('/position/queryPosition', {
                    params: {
                        positionName: positionName
                    }
                })
                .then((rep) => {
                    then.list = rep.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            initFormatter: function(){
                Date.prototype.Format = function(fmt) {
                    let o = {
                        "M+" : this.getMonth()+1,                 //月份
                        "d+" : this.getDate(),                    //日
                        "h+" : this.getHours(),                   //小时
                        "m+" : this.getMinutes(),                 //分
                        "s+" : this.getSeconds(),                 //秒
                        "q+" : Math.floor((this.getMonth()+3)/3), //季度
                        "S"  : this.getMilliseconds()             //毫秒
                    };
                    if(/(y+)/.test(fmt))
                        fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
                    for(var k in o)
                        if(new RegExp("("+ k +")").test(fmt))
                            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                    return fmt;
                }
            }
        }
    });
    </script>
</body>
</html>